import React, {useRef, useState} from 'react';
import ProForm, {ProFormSelect, ProFormText, DrawerForm, StepsForm} from "@ant-design/pro-form";
import {Button, Col, message, Modal, Form, Switch, Select} from "antd";
import DataConfig from "./DataConfig";
import { request } from "umi";
import {PlusOutlined} from "@ant-design/icons/lib";



export default (props: any) => {
  const [modalVisit, setModalVisit] = useState(false);
  const [testRule, setTestRule] = useState(false);
  const [cpkStatus, setCpkStatus] = useState(false);
  const curDashboard = props.toDashboardId;

  function existCurrentDashboard() {
    if (curDashboard === 0){
      message.error('请检查当前大盘')
      setModalVisit(false)
    }else{
      setModalVisit(true)
    }
  }

  function handleChartChange(item: any){
    switch (item) {
      case 'Capa':
        setTestRule(false)
        setCpkStatus(true)
        break;
      case 'Sixpack':
        setTestRule(true)
        setCpkStatus(true)
        break;
      case 'XRChart':
        setTestRule(true)
        setCpkStatus(false)
        break;
      default:
        break;
    }
  }

  const formRef = useRef();

  return(
    <DrawerForm<{
      groupSize: number;
      curDashboardId: number;
      testRule: [];
      chartType: string;
      productId: number;
      Uspec: number;
      Lspec: number;
      email: string;
      wechatAlarm: boolean;
      qcIds: [];
    }>
      title={props.name}
      formRef={formRef}
      visible={modalVisit}
      onVisibleChange={(item) => {
        setModalVisit(item)
        setTestRule(false)
        setCpkStatus(false)
      }}
      trigger={
        <Button type="primary" onClick={existCurrentDashboard}>
          <PlusOutlined />
          {props.name}
        </Button>
      }
      drawerProps={{
        forceRender: true,
        destroyOnClose: true,
      }}
      onFinish={async (values) => {

        if (typeof values.Uspec !== 'undefined' && typeof values.Lspec !== 'undefined' && values.Lspec > values.Uspec){
          message.error('规格上限 必须大于 规格下限')
          return false
        }
        await request('/api/dashboardChart/create', {
          method: 'post',
          data: {
            values,
            curDashboard,
          },
          skipErrorHandler: true,
        }).then( data => {
          if (data.code === 200)
            setModalVisit(false)
          props.updateChartContain()
          message.success(data.message);
          return true;
        });
      }}
    >
      <DataConfig />
        <ProForm.Group>
          <Form.Item
            label="分析类型"
            name="chartType"
            rules={[{ required: true}]}
          >
            <Select
              placeholder="请选择"
              style={{ width: 320 }}
              allowClear
              onChange={handleChartChange}>
              <Select.Option key='XRChart' value="XRChart">子组变量XRChart控制图</Select.Option>
              <Select.Option key='Capa' value="Capa">过程能力分析报告（正态）</Select.Option>
              <Select.Option key='Sixpack' value="Sixpack">六合一图（正态）</Select.Option>
            </Select>
          </Form.Item>
          <ProFormText
            name="groupSize"
            width="md"
            label="子组大小"
            placeholder="子组大小"
            rules={[{ required: true },{
              pattern:/^[2-9][0-9]*$/,
              message:'子组必须大于1的正整数'
            }]}
          />
        </ProForm.Group>
      {
        cpkStatus?
          <ProForm.Group>
            <ProFormText
              name="Uspec"
              width="md"
              label="规格上限"
              placeholder="规格上限"
              rules={[
                { required: true},
                {
                  pattern:/^[1-9][0-9]*$/,
                  message:'必须为正整数'
                }
              ]}
            />
            <ProFormText
              name="Lspec"
              width="md"
              label="规格下限"
              placeholder="规格下限"
              rules={[
                { required: true},
                {
                  pattern:/^[1-9][0-9]*$/,
                  message:'必须为正整数'
                }
              ]}
            />
          </ProForm.Group>
          : null
      }

      {
        testRule ? <ProForm.Group>

              <ProFormText
                name="email"
                width="md"
                label="报警通知人邮箱"
                placeholder="报警通知人邮箱"
                rules={[
                  {
                    pattern:/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/,
                    message:'邮箱格式不正确'
                  }
                ]}
              />
              <ProFormSelect
                options={[
                  {
                    value: '1',
                    label: '一个点，距离中心线大于个标准差',
                  },
                  {
                    value: '2',
                    label: '连续K点在中心线同一侧',
                  },
                ]}
                width="md"
                defaultValue="lucy"
                name="testRule"
                label="检验"
                mode="multiple"
                allowClear
                rules={[{ required: true}]}
              />
              <Form.Item
                name="wechatAlarm"
                label='微信通知'
                valuePropName="checked">
                <Switch defaultChecked={false}/>
              </Form.Item>
        </ProForm.Group>
          :
          null
      }



    </DrawerForm>
  )

}
